<template>
  <!-- 对话框配置项: 关闭时销毁, 可拖拽, 居中-->
  <el-dialog
    v-model="dialogs.event.statistics"
    title="交通事件统计"
    destroy-on-close
    draggable
    center
    width="80%"
  >
    <div class="content">
      <div id="pie-charts" style="width: 50%; height: 400px"></div>
      <div id="category-charts" style="width: 50%; height: 400px"></div>
    </div>
  </el-dialog>
</template>

<script setup>
import * as echarts from 'echarts/core' // 引入echart模块
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components'
import { PieChart, LineChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { ref, nextTick } from 'vue' // 导入vue相关hook函数
import eventApi from '@/apis/event.js' // 导入封装好的API
import { useDialogsStore } from '@/stores/dialogs' // 导入vue相关hook函数
const { dialogs } = useDialogsStore()

// 注册必须的echarts组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  GridComponent,
  LineChart,
  UniversalTransition,
])
//初始化饼状图图表，设置配置项
function createPieCharts(data) {
  var chartDom = document.getElementById('pie-charts')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    title: {
      text: '不同处理状态的交通事件数',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '数量:',
        type: 'pie',
        radius: '65%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  option && myChart.setOption(option)
}
// 初始化折线图图表，设置配置项
function createCategoryCharts(data) {
  var chartDom = document.getElementById('category-charts')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '2022年每个月的交通事件数',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    xAxis: {
      type: 'category',
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: data,
        type: 'line',
      },
    ],
  }
  option && myChart.setOption(option)
}

nextTick(async () => {
  // 1.查询每种处理状态的交通事件数
  const pieRes = await eventApi.getEventStatusNum()
  const pieData = []
  pieRes.result.data.forEach((item) => {
    pieData.push({ name: item.status, value: item.num })
  })
  // 2.创建饼状图图表
  createPieCharts(pieData)

  // 1.查询指定年份每个月的交通事件数
  const categoryRes = await eventApi.getEventMonthNumByYear(
    new Date().getFullYear()
  )
  const categoryData = []
  categoryRes.result.data.forEach((item) => {
    categoryData.push(item.num)
  })
  // 2.创建折线图图表
  createCategoryCharts(categoryData)
})
</script>
<style scoped>
.content {
  padding: 5vh 0;
  display: flex;
  justify-content: space-between;
}
</style>
